<template>
  <div
    style="height: 450px"
    class="uni-scroll"
  >
    <el-radio-group v-model="type" @change="init">
      <el-radio-button label="open">常开</el-radio-button>
      <el-radio-button label="close">常闭</el-radio-button>
      <el-radio-button label="time">时间策略</el-radio-button>
      <el-radio-button label="photoDiode">光敏策略</el-radio-button>
      <el-radio-button label="ai">智能策略</el-radio-button>
    </el-radio-group>
    <div v-if="type=='open'">
      <div style="font-size: 200px;margin: 50px auto">常开</div>
    </div>
    <div v-else-if="type=='close'">
      <div style="font-size: 200px;margin: 50px auto">常闭</div>
    </div>
    <div v-else-if="type=='photoDiode'">
      <el-form>
        <el-form-item label="光敏值">
          <el-input v-model="aiPhotoDiode" :placeholder="$t('photoDiode')" />
        </el-form-item>
      </el-form>
    </div>
    <div v-else-if="type=='ai' || type=='time'">
      <el-form v-if="type=='ai'">
        <el-form-item label="光敏值">
          <el-input v-model="aiPhotoDiode" :placeholder="$t('photoDiode')" />
        </el-form-item>
      </el-form>
      <div v-for="(item,index) in strategyList" :key="index" style="margin-bottom: 20px;margin-top: 28px">
        <div style="display: flex">
          <div style="background: #CFCFCF;width: 20px;text-align: center;height: 120px">
            <span style="line-height: 30px">{{ item.weekStr }}</span>
            <el-button type="text" icon="el-icon-plus" style="margin-top: 60px" @click="addStrategy(index,item)" />
          </div>
          <div
            v-for="(item2,index2) in item.strategyList"
            :key="index2"
            style="width:113px;margin: 5px;padding: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
          >
            <div>
              <span>时间:<i
                style="float: right;color: red;margin-bottom: 5px"
                class="el-icon-delete"
                @click="deleteStrategey(index,item2)"
              /></span>
              <el-time-picker
                v-model="item2.time"
                :picker-options="item2.pickerOptions"
                style="width: 100%"
                value-format="HH:mm"
                format="HH:mm"
                :placeholder="$t('timing')"
              />
            </div>
            <div style="margin-top: 13px">
              <span style="margin-bottom: 5px">亮度:</span>
              <el-input v-model="item2.brightness" style="text-align: center" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updateDeviceStrategy">确 定</el-button>
    </span>
  </div>
</template>

<script>
import {
  sendDeviceSetting
} from '@/api/iot/iotDeviceSettingApi'
import {
  failureNotice,
  successNotice
} from '@/util/common'

export default {
  name: 'DeviceStrategy',
  props: {
    deviceStrategy: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      type: 'time',
      aiPhotoDiode: '50',
      strategyList: []

    }
  },
  watch: {
    deviceStrategy: {
      handler(val) {
        if (val != null) {
          this.initType()
        }
      }
    }
  },
  created() {
    this.initType()
  },
  methods: {
    initType() {
      if (this.deviceStrategy.setStrategy == null || this.deviceStrategy.setStrategy === '') {
        this.deviceStrategy.setStrategy = '0,0,0,0,0,0,0,0,0'
      }
      const deviceStrategyStrlist = this.deviceStrategy.setStrategy.split(',')
      switch (deviceStrategyStrlist[0]) {
        case '0':
          this.type = 'close'
          break
        case '1':
          this.type = 'open'
          break
        case '3':
          this.type = 'photoDiode'
          break
        case '4':
          this.type = 'ai'
          break
        case '2':
          this.type = 'time'
          break
        default:
          console.log('unknow deviceStrategyStrlist[0]')
          return
      }
      this.init()
    },
    updateDeviceStrategy() {
      let value = ''
      switch (this.type) {
        case 'close':
          value = '0'
          break
        case 'open':
          value = '1'
          break
        case 'photoDiode':
          value = '3'
          break
        case 'ai':
          value = '4'
          break
        case 'time':
          value = '2'
          break
        default:
          failureNotice(this)
          return
      }
      if (this.type === 'ai' || this.type === 'time') {
        value = value + ',' + this.aiPhotoDiode + ','
        this.strategyList.forEach(weekItem => {
          if (weekItem.strategyList.length === 0) {
            value = value + '0'
          } else {
            for (let i = 0, j = weekItem.strategyList.length; i < j; i++) {
              if (i === j - 1) {
                value = value + weekItem.strategyList[i].brightness + '&' + weekItem.strategyList[i].time
              } else {
                value = value + weekItem.strategyList[i].brightness + '&' + weekItem.strategyList[i].time + '|'
              }
            }
          }
          value = value + ','
        })
        value = value.slice(0, value.length - 1)
      }
      const that = this
      sendDeviceSetting({
        deviceCore: this.deviceStrategy.deviceCore,
        port: this.deviceStrategy.port,
        setting: 'setStrategy',
        value: value
      }).then(res => {
        if (res.code === '200') {
          successNotice(that)
        }
        that.$emit('change', {})
      })
    },
    deleteStrategey(index, item) {
      for (let i = 0, j = this.strategyList[index].strategyList.length; i < j; i++) {
        if (this.strategyList[index].strategyList[i].time === item.time) {
          this.strategyList[index].strategyList.splice(i, 1)
        }
      }
    },
    addStrategy(index, item) {
      let biggestTime = -1
      if (this.strategyList[index].strategyList.length > 9) {
        return
      }
      this.strategyList[index].strategyList.forEach(strategyList => {
        const tt = strategyList.time.split(':')
        const t = parseInt(tt[0]) * 60 + parseInt(tt[1])
        if (t > biggestTime) {
          biggestTime = t
        }
      })
      let tt0 = Math.round(biggestTime / 60)
      let tt1 = Math.round(biggestTime % 60)
      if ((tt1 + 1) > 9) {
        tt0 = tt0 + 1
      } else {
        tt1 = '0' + (tt1 + 1)
      }
      if (tt0 < 9) {
        tt0 = '0' + tt0
      }
      const start = tt0 + ':' + tt1
      this.strategyList[index].strategyList.push({
        week: item.week,
        time: start,
        brightness: 50
      })
    },
    init() {
      if (this.deviceStrategy == null) {
        console.log('this.deviceStrategy == null')
        return
      }
      switch (this.type) {
        case 'close':
          if (this.deviceStrategy.setStrategy == null || this.deviceStrategy.setStrategy === '') {
            this.deviceStrategy.setStrategy = '0,0,0,0,0,0,0,0,0'
          }
          break
        case 'open':
          if (this.deviceStrategy.setStrategy == null || this.deviceStrategy.setStrategy === '') {
            this.deviceStrategy.setStrategy = '1,0,0,0,0,0,0,0,0'
          }
          break
        case 'photoDiode':
          if (this.deviceStrategy.setStrategy == null || this.deviceStrategy.setStrategy === '') {
            this.deviceStrategy.setStrategy = '3,0,0,0,0,0,0,0,0'
          }
          break
        case 'ai':
          if (this.deviceStrategy.setStrategy == null || this.deviceStrategy.setStrategy === '') {
            this.deviceStrategy.setStrategy = '4,0,0,0,0,0,0,0,0'
          }
          break
        case 'time':
          if (this.deviceStrategy.setStrategy == null || this.deviceStrategy.setStrategy === '') {
            this.deviceStrategy.setStrategy = '2,0,0,0,0,0,0,0,0'
          }
          break
        default:
          failureNotice(this)
          return
      }
      const deviceStrategyStrlist = this.deviceStrategy.setStrategy.split(',')
      this.aiPhotoDiode = deviceStrategyStrlist[1]
      const strategyList1 = {
        weekStr: '一',
        week: 1,
        strategyList: []
      }
      const strategyList2 = {
        weekStr: '二',
        week: 2,
        strategyList: []
      }
      const strategyList3 = {
        weekStr: '三',
        week: 3,
        strategyList: []
      }
      const strategyList4 = {
        weekStr: '四',
        week: 4,
        strategyList: []
      }
      const strategyList5 = {
        weekStr: '五',
        week: 5,
        strategyList: []
      }
      const strategyList6 = {
        weekStr: '六',
        week: 6,
        strategyList: []
      }
      const strategyList7 = {
        weekStr: '日',
        week: 7,
        strategyList: []
      }
      this.strategyList = [strategyList1, strategyList2, strategyList3, strategyList4, strategyList5, strategyList6, strategyList7]
      for (let i = 2, j = deviceStrategyStrlist.length; i < j; i++) {
        const strategyList = []
        if (deviceStrategyStrlist[i] !== '0') {
          const dayStrategyStrList = deviceStrategyStrlist[i].split('|')
          dayStrategyStrList.forEach(dayStrategyStr => {
            const timeStrategyStrList = dayStrategyStr.split('&')
            strategyList.push({
              brightness: timeStrategyStrList[0],
              time: timeStrategyStrList[1]
            })
          })
        }
        switch (i - 1) {
          case 1:
            strategyList1.strategyList = strategyList
            break
          case 2:
            strategyList2.strategyList = strategyList
            break
          case 3:
            strategyList3.strategyList = strategyList
            break
          case 4:
            strategyList4.strategyList = strategyList
            break
          case 5:
            strategyList5.strategyList = strategyList
            break
          case 6:
            strategyList6.strategyList = strategyList
            break
          case 7:
            strategyList7.strategyList = strategyList
            break
        }
      }
      this.strategyList = [strategyList1, strategyList2, strategyList3, strategyList4, strategyList5, strategyList6, strategyList7]
    }
  }
}
</script>

<style scoped>
  .dialog-footer {
    position: absolute;
    right: 5px;
    bottom: 5px;
  }
</style>
